import React from 'react';
import './vehicle.css';
import { deepFullCopy, messages } from 'share/common';
import ResizeTable from 'components/resize-table';
import { Button, message } from 'antd';
import ListSelector from 'components/list-selector';
import vehicleService from './vehicle.service';
class VehicleDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      pagination: {
        pageSize: 10,
        current: 1,
        page: 0,
        total: 0,
        size: 10,
        showSizeChanger: true,
        showQuickJumper: true,
      },
      columns: [{
        title: '关联人姓名',
        width: '90%',
        dataIndex: 'relatedPersonName'
      }, {
        title: '操作',
        width: '10%',
        dataIndex: 'atcion',
        render: (text, record) => {
          return <a className="tableText" href="javascript:void(0);" onClick={() => this.handleDelete(record)}>删除</a>
        }
      }],
      loading: false,
      visible: false
    }
  }

  componentDidMount() {
    this.getListData();
  }

  getListData = () => {
    const { pagination } = this.state;
    let url = '';
    const { id } = this.props.params;
    let params = {
      size: pagination.size,
      page: pagination.page
    }
    const paginationTemp = Object.assign({}, pagination);
    try {
      vehicleService.getRelationListData(id, params).then(res => {
        console.log("res", res)
        if (res.status === 200) {
          paginationTemp.total = Number(res.headers["x-total-count"]);
          this.setState({
            data: res.data,
            pagination: paginationTemp,
            loading: false
          })
        }
      });
    } catch (err) {
      paginationTemp.total = 0;
      this.setState({
        data: [],
        pagination: paginationTemp,
        loading: false
      });
    }
  }

  handleOnAdd = () => {
    this.setState({ visible: true })
  }

  onChangePage = (pagination, filters, sorter) => {
    
  }

  onOk = (data) => {
    const { id } = this.props.params;
    if (data.result && data.result.length > 0) {
      let arr = [];
      data.result.map(item => {
        arr.push({
          carId: id,
          relatedPersonOid: item.userOID,
          relatedPersonName: item.fullName
        })
      });
      vehicleService.addRelationListData(arr).then(res => {
        console.log("res", res)
        if (res.data) {
          this.setState({
            visible: false
          }, () => {
            this.getListData()
          })
        }
      }).catch(err => {
        message.error(err);
      })
    } else {
      this.setState({ visible: false })
    }
  }

  onCancel = () => {
    this.setState({ visible: false })
  }
  
  handleDelete = (record) => {
    console.log("record", record)
    vehicleService.deleteRelationListData(record.id).then(res => {
      console.log("res", res)
      if (res.status === 200) {
        message.success('删除成功');
        this.getListData()
      }
    }).catch(err => {
      message.error(err);
    })
  }

  render() {
    return (
      <div className={'vehicleDetail'}>
        <div className="title">关联人信息</div>
        <div className="totalNum">
          {messages('common.total', { total: `${this.state.pagination.total}` })}
        </div>
        <div className="btnsContainer">
          <Button className="addBtn" type="primary" onClick={() => this.handleOnAdd()}>{messages('common.create')}</Button>
        </div>
        <ResizeTable
          dataSource={this.state.data}
          loading={this.state.loading}
          pagination={this.state.pagination}
          onChange={this.onChangePage}
          columns={this.state.columns}
          size="middle"
          bordered
        />
        <ListSelector
          visible={this.state.visible}
          onOk={this.onOk}
          onCancel={this.onCancel}
          type={'user_relation_car'}
        />
      </div>
    )
  }
}

export default VehicleDetail;
